import React, { useEffect, useState, useLayoutEffect } from "react";
import { DownOutlined } from "@ant-design/icons";
import { Button, Select, Input, DatePicker, Dropdown, Menu, Space, Popover, Image, Typography, Form, InputNumber } from "antd";
import { NumText } from "@/pages/OrderModule/common/components/CommonText";
import BatchSuffixInput from "@/views/components/BatchSuffixInput";
import moment from "moment";
import { getInfoGoodsSpu } from "../../../service";
const { RangePicker } = DatePicker;
const { Text } = Typography;
const dateFormat = "YYYY-MM-DD HH:mm:ss";
export default ({ isSkuType, renderAction }) => {

	const defaultColumns = ({ isSkuType }) => {
		return [
			{
				tabs: ["spu", "sku"],
				name: "序号",
				code: "index",
				render: (t, r, i) => i + 1,
				lock: true,
				width: 60
			},
			{
				tabs: ["spu", "sku"],
				name: "图片",
				code: "image",
				width: 60,
				render: (value, record) => <Image width={32} height={32} src={value} />
			},
			{
				tabs: ["spu", "sku"],
				name: "商品名称",
				code: isSkuType ? "skuName" : "spuName",
				width: 300,
				search: {
					order: 10,
					content: () => (
						<BatchSuffixInput
							autoMultiLine
							allowClear
							clearable
							maxItem={500}
							placeholder="多个商品名称"
							message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
							areaPlaceholder="每行输入1个内容，最多500个，例如:
          1272572508553111112223
          1272572512332111112226"
						/>
					)
				}
			},
			{
				tabs: ["sku", "spu"],
				name: "商品编码",
				code: "skuCode",
				width: 160,
				hidden: !isSkuType,
				search:
					 {
							order: 20,
							content: () => (
								<BatchSuffixInput
									autoMultiLine
									allowClear
									clearable
									maxItem={500}
									placeholder="多个商品编码，以逗号隔开"
									message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
									areaPlaceholder="每行输入1个内容，最多500个，例如:
      1272572508553111112223
      1272572512332111112226"
								/>
							)
						}
			},
			{
				tabs: ["spu", "sku"],
				name: "货号",
				code: "todo",
				hidden: true,
				search: !isSkuType
					? {
							order: 30,
							content: () => (
								<BatchSuffixInput
									autoMultiLine
									allowClear
									clearable
									maxItem={500}
									placeholder="多个货号，以逗号隔开"
									message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
									areaPlaceholder="每行输入1个内容，最多500个，例如:
      1272572508553111112223
      1272572512332111112226"
								/>
							)
						}
					: undefined
			},
			{
				tabs: ["spu", "sku"],
				name: "款式编码",
				code: "spuCode",
				width: 160,
				search: {
					order: 30,
					content: () => (
						<BatchSuffixInput
							autoMultiLine
							allowClear
							clearable
							maxItem={500}
							placeholder="多个款式编码，以逗号隔开"
							message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
							areaPlaceholder="每行输入1个内容，最多500个，例如:
1272572508553111112223
1272572512332111112226"
						/>
					)
				}
			},
			// {
			// 	tabs: ["spu"],
			// 	name: "商品信息",
			// 	code: "spuName",
			// 	width: 260
			// },
			{
				tabs: ["sku"],
				name: "商品简称",
				code: "skuAbbreviation",
				width: 160
			},
			{
				tabs: ["sku"],
				name: "颜色规格",
				code: "colorSpecifications",
				width: 160,
				// hidden: isSkuType,
				search: isSkuType ? { order: 20, content: () => <Input placeholder="请输入颜色规格" /> } : undefined
			},
			{
				tabs: ["spu", "sku"],
				name: "零售价",
				render: value => value && <NumText as="s1" pre="¥" num={value} />,
				code: "retailPrice"
			},
			{
				tabs: ["spu", "sku"],
				name: "采购价",
				code: "purchasePrice",
				render: value => value && <NumText as="s1" pre="¥" num={value} />
			},
			{
				tabs: ["spu", "sku"],
				name: "成本价",
				code: "costPrice",
				render: value => value && <NumText as="s1" pre="¥" num={value} />
			},
			{
				tabs: ["spu", "sku"],
				name: "市场价|吊牌价",
				code: "tagPrice",
				width: 160,
				render: value => value && <NumText as="s1" pre="¥" num={value} />
			},

			{
				tabs: ["spu", "sku"],
				name: "重量",
				code: "weight",
				width: 90,
				render: value => value && <NumText as="s1" suffix="kg" num={value} />
			},
			{
				tabs: ["spu", "sku"],
				lock: true,
				width: isSkuType ? 260 : 260,
				name: "操作",
				align: "center",
				code: "action",
				render: (_, record) => renderAction(record)
			}
		];
	};

	const skuColumns = () => {
		return defaultColumns({ isSkuType }).filter(e => e.tabs.includes("sku"));
	};
	const spuColumns = () => {
		return defaultColumns({ isSkuType }).filter(e => e.tabs.includes("spu"));
	};

	const [columns, setColumns] = useState(skuColumns());
	useLayoutEffect(() => {
		setColumns(isSkuType ? skuColumns() : spuColumns());
	}, [isSkuType]);

	return { columns, defaultColumns, skuColumns, spuColumns };
};
